<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../jquery-3.3.1.min.js"></script>
    <style>
        #mask_login {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background-color: #ccc;
            opacity: .5;
            text-align: center;
            line-height: 600px;
            display: none;
        }
    </style>
    <script>
       $(function(){
           // ajax初始化
           var xhr = new XMLHttpRequest();
           $("#btn").click(function(){
                $("#mask_login").css("display","block");
                // open
                xhr.open('POST','http://127.0.0.1/AJAX_project/ajax_post_test/ajax_post.php');
                // 设置请求头 为表单格式
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                // 发送
                // xhr.send("admin="+$("#admin").val()+"&password="+$("#password").val+"");
                xhr.send("admin="+$("#admin").val()+"&password="+$("#password").val()+"");
                // 获得响应体
                xhr.onreadystatechange=function(){
                    if (this.readyState == 4) {
                        $("#mask_login").css("display","none");
                    }
                }
           });
       }); 
    </script>
</head>
<body>
    <div id="mask_login">loading</div>
    <table id="login">
        <tr>
            <td>用户名：</td>
            <td><input type="text"  id="admin"></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password"  id="password"></td>
        </tr>
        <tr>
            <td></td>
            <td id="btn"><button>登录</button></td>
        </tr>
    </table>
    
</body>
</html>